// src/components/SlickSlider.tsx
'use client';

import dynamic from 'next/dynamic';
import React from 'react';
import { Settings } from 'react-slick';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const Slider = dynamic(() => import('react-slick'), {
  ssr: false,
  loading: () => <div className="h-64 bg-gray-100 animate-pulse rounded-lg" />,
});

interface SlickSliderProps {
  settings: Settings;
  children: React.ReactNode;
}

export default function SlickSlider({ settings, children }: SlickSliderProps) {
  return <Slider {...settings}>{children}</Slider>;
}
